<template>
  <view>
    <top-nav-bar backgroundColor="#fff" />
    <!-- <view class="top-title">{{ $t('nav.title14') }}</view> -->
    <view class="public-title">
      {{ $t('nav.title14') }}
    </view>
    <view class="top-img">
      <image
        src="/static/bank-index.png"
        mode="aspectFill"
        style="width: 100%; height: 100%"></image>
      <text class="des">{{ $t('bank.title') }}</text>
    </view>
    <!-- https://ext.dcloud.net.cn/plugin?id=20630 -->
    <l-tabs
      v-model="navigIndex"
      swipeable
      animated
      style="padding-bottom: 80rpx">
      <l-tab-panel
        v-for="item in list"
        :key="item.value"
        :value="item.value"
        :label="$t(`nav.title${item.name}`)">
        <view style="margin-top: 40rpx">
          <component
            v-if="item.value === navigIndex"
            :is="item.is"></component>
        </view>
      </l-tab-panel>
    </l-tabs>
    <foot-page />
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import direction from './components/direction.vue'
  import history from './components/history.vue'
  import imagine from './components/imagine.vue'
  import partner from './components/partner.vue'

  const navigIndex = ref(1)
  const list = [
    {
      value: 1,
      name: '14-1',
      is: imagine
    },
    {
      value: 2,
      name: '14-2',
      is: history
    },
    {
      value: 3,
      name: '14-3',
      is: partner
    },
    {
      value: 4,
      name: '14-4',
      is: direction
    }
  ]

  onLoad((e) => {
    console.log(e, '==')
    navigIndex.value = Number(e.index)
  })
</script>

<style lang="scss" scoped>
  .public-title {
    margin: 30rpx 0 54rpx;
    padding: 0 32rpx;
  }

  .top-img {
    height: 334rpx;
    position: relative;
    margin-bottom: 50rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .des {
      position: absolute;
      // top: 264rpx;
      bottom: 38rpx;
      left: 48rpx;
      width: 448rpx;
      height: 88rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
</style>
